<template>
  <div class="jsbds">
    <el-container>
      <el-main>
        <el-form :model="bdsForm" label-width="85px">
          <el-form-item label="表达式描述">
            <el-input v-model="bdsForm.bdsms" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="表达式类型">
            <el-radio v-model="bdsForm.bdslx" :disabled="!!bdsForm.bds&&bdsForm.bdslx!=='JS'" label="JS">计算</el-radio>
            <el-radio v-model="bdsForm.bdslx" :disabled="!!bdsForm.bds&&bdsForm.bdslx!=='TS'" label="TS">提示</el-radio>
            <!--<el-radio v-model="bdsForm.bdslx" label="DM" :disabled="!!bdsForm.bds&&bdsForm.bdslx!=='DM'">代码</el-radio>-->
          </el-form-item>
          <el-form-item label="核查字段" label-width="85px">
            <el-select v-model="bdsForm.hczdList"
                       :disabled="bdsForm.bdslx !== 'TS'"
                       multiple style="width: 100%;"
                       value-key="zdmc">
              <el-option
                  v-for="zd in allHcZdList"
                  :key="zd.zdmc"
                  :label="zd.zdzwmc||zd.zdmc"
                  :value="zd">
              </el-option>
              <el-option
                  v-for="zd in bdsForm.hczdList"
                  v-if="isNotInAllHcZdList(zd)"
                  :key="zd.zdmc"
                  :label="zd.zdmc"
                  :value="zd">
              </el-option>

            </el-select>
          </el-form-item>
          <el-form-item v-show="bdsForm.bdslx!=='DM'" label="表达式">
            <bds-input-box ref="bdsInput" v-model="bdsForm.bds"></bds-input-box>
            <!--<el-input v-model="bdsForm.bds" autocomplete="off" class="bds" disabled type="textarea"></el-input>-->
          </el-form-item>
          <!--<el-form-item label="表达式" v-show="bdsForm.bdslx==='DM'">-->
          <!--  <code-editor-->
          <!--      @contentChange="contentChange"-->
          <!--      :value="bdsForm.bds"-->
          <!--      style="height: 100px">-->
          <!--  </code-editor>-->
          <!--  <bds-input-box ref="bdsInput" v-model="bdsForm.bds"></bds-input-box>-->
          <!--  <el-input disabled v-model="bdsForm.bds" autocomplete="off" class="bds" type="textarea"></el-input>-->
          <!--</el-form-item>-->
        </el-form>
      </el-main>
      <el-divider direction="vertical"></el-divider>
      <el-aside>
        <div class="insert-box">
          <el-tabs v-model="crlx">
            <!--<el-tab-pane :disabled="bdsForm.bdslx === 'TS'" label="公式" name="gs">-->
            <!--  <select-gs @select="handleSelectGs"/>-->
            <!--</el-tab-pane>-->
            <el-tab-pane label="变量" name="bl">
              <select-bl @select="handleSelectBl"/>
            </el-tab-pane>
            <el-tab-pane label="常量" name="cl">
              <select-cl v-if="crlx==='cl'"
                         :bds="bdsForm.bds"
                         @select="handleSelectCl"
                         @select-children="handleSelectChildrenCl"/>
            </el-tab-pane>
            <el-tab-pane label="方法" name="ff">
              <select-ff @select="handleSelectFf"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import SelectBl from "@/components/com/SelectBl";
import SelectGs from "@/components/com/SelectGs";
import SelectFf from "@/components/com/SelectFf";
import SelectCl from "@/components/com/SelectCl";

import BdsInputBox from "@/components/BdsInputBox";
import CodeEditor from "@/components/CodeEditor";

export default {
  name: "JsBdsNew",
  components: { SelectBl, SelectGs, SelectFf, SelectCl, BdsInputBox, CodeEditor },
  data () {
    return {
      crlx: 'bl',
      bdsForm: {
        bdsbm: '',
        gzbm: '',
        bdsmc: '',
        bdsms: '',
        bds: '',
        cjsj: '',
        bdslx: 'JS',
        hczdList: [],
        hczd: '[]'
      },
    }
  },
  props: {
    allZdList: {
      type: Array,
      default: () => ([])
    },
    bdsObj: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    allHcZdList () {
      return this.allZdList.filter(item => item.bdslx === 'JS')
    }
  },
  watch: {
    'bdsForm.bdslx' () {
      if (this.bdsForm.bdslx === 'JS') {
        this.bdsForm.hczd = '[]'
        this.bdsForm.hczdList = []
      } else if (this.bdsForm.bdslx === 'TS') {
        if (this.crlx === 'gs') {
          this.crlx = 'bl'
        }
      }
    }
  },
  mounted () {
    this.setBdsForm(this.bdsObj)
  },
  methods: {
    isNotInAllHcZdList (hczd) {
      return this.allHcZdList.every(item => item.zdmc !== hczd.zdmc)
    },
    contentChange (val) {
      this.bdsForm.bds = val
    },
    handleSelectGs (jslx) {
      let bdsInput = this.$refs.bdsInput
      bdsInput.insert(jslx.format)
    },
    handleSelectBl (stjg, stdy) {
      let str = `getValue($data, '${stdy.stbm}.${stjg.zdmc}', ${this.bdsForm.bdslx === 'TS'})`

      let bdsInput = this.$refs.bdsInput
      bdsInput.insert(str)
    },
    handleSelectFf (ff) {
      let bdsInput = this.$refs.bdsInput
      bdsInput.insert(ff.ffStr)
    },
    handleSelectChildrenCl (cls = []) {
      let str = ``
      for (let i = 0; i < cls.length; i++) {
        let cl = cls[i]
        if (i) {
          str += ","
        }
        if (this.bdsForm.bdslx === 'TS') {
          str += `${cl.mc}`
        } else {
          str += `"${cl.dm}"`
        }
      }

      let bdsInput = this.$refs.bdsInput
      bdsInput.insert(str)
    },
    handleSelectCl (cl) {
      let str = cl.dm

      if (this.bdsForm.bdslx === 'TS') {
        str = cl.mc
      }

      let bdsInput = this.$refs.bdsInput
      bdsInput.insert(str)
    },

    setBdsForm (bdsForm) {
      this.bdsForm = {
        bdsbm: bdsForm.bdsbm,
        gzbm: bdsForm.gzbm,
        bdsmc: bdsForm.bdsmc,
        bdsms: bdsForm.bdsms,
        bds: bdsForm.bds,
        cjsj: bdsForm.cjsj,
        bdslx: bdsForm.bdslx,
        hczdList: bdsForm.hczdList,
        hczd: bdsForm.hczd
      }
    },
    getBdsForm () {
      if (!this.bdsForm.bdsms) {
        throw new Error("表达式描述为必填项")
      }
      if (!this.bdsForm.bds) {
        throw new Error("表达式为必填项")
      }
      return {
        bdsbm: this.bdsForm.bdsbm,
        gzbm: this.bdsForm.gzbm,
        bdsmc: this.bdsForm.bdsmc,
        bdsms: this.bdsForm.bdsms,
        bds: this.bdsForm.bds.replace(/\s+/g, " ").trim(),
        cjsj: this.bdsForm.cjsj,
        bdslx: this.bdsForm.bdslx,
        hczdList: this.bdsForm.hczdList,
        hczd: this.bdsForm.hczd,
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.jsbds {
  height: 100%;

  ::v-deep .el-container {
    height: 100%;
  }

  .insert-box {
    height: 100%;
  }
}
</style>
